@()(implicit request: play.api.mvc.RequestHeader)
@main("InDel") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("phylotree.js-master/phylotree.css")">
	<script src="@routes.Assets.at("javascripts/d3.min.js")" type="text/javascript"></script>
	<script src="@routes.Assets.at("javascripts/underscore.min.js")" type="text/javascript"></script>
	@* <script src="@routes.Assets.at("javascripts/d3.v5.js")" type="text/javascript"></script>*@
	<script src="@routes.Assets.at("phylotree.js-master/phylotree.js")" type="text/javascript"></script>

	<style>

			.radio, .checkbox {
				position: relative;
				display: block;
				margin-top: 5px;
				margin-bottom: 10px;
			}

			table img {
				vertical-align: middle;
			}

			table .myImgTd {
				text-align: center;
			}

			.fa-rotate-135 {
				-webkit-transform: rotate(135deg);
				-moz-transform: rotate(135deg);
				-ms-transform: rotate(135deg);
				-o-transform: rotate(135deg);
				transform: rotate(135deg);
			}

			.fa-rotate-45 {
				-webkit-transform: rotate(45deg);
				-moz-transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				-o-transform: rotate(45deg);
				transform: rotate(45deg);
			}

			.myGroup {
				margin-top: 15px;
				margin-left: 15px;
			}


	</style>

	<div class="row">
		<div class="form-group col-sm-12">
			<h2 class="page-heading"
			style="text-align: left;
				border-bottom: 5px solid #e9f3f4">InDel</h2>
		</div>
	</div>

	<div id="content" style="display: block" >

		<ul class="nav nav-tabs">

			<li class="active" id="expressLi">
				<a href="#cdsInDel" data-toggle="tab" >CDS InDel Summary</a>
			</li>

			<li class="" id="survivalLi">
				<a href="#interInDel" data-toggle="tab" aria-collapseed="false"> Intergenic InDel Summary</a>
			</li>
		</ul>

		<div id="myTabContent" class="tab-content">

			<div class="tab-pane fade in active" id="cdsInDel">

				<div class="table-responsive" style="margin-top: 20px">

					<label>Select the columns to display:</label>
					<div id="checkbox" class="checkbox"></div>

					<div style="display: none;
						margin-bottom: 10px">Filtering and sort：
						<span id="filterCondition">

							<span class="eachFilterCondition" style="display: none">
								<span >Gene ID</span>
								<span style="color: red">LIKE</span>
								AT
								<sup style="" class="mySup" onclick="SampleManage.removeCondition">
									<i class="fa fa-times-circle"></i>
								</sup>
							</span>

						</span>
					</div>

					<div style="display: none;
						margin-bottom: 10px">Sorting conditions：
						<span id="sortCondition">

							<span class="eachFilterCondition" style="display: block">
								<span >Gene ID ,</span>
								<span style="color: red">Ascending sort</span>
								<sup style="" class="mySup" onclick="SampleManage.removeCondition">
									<i class="fa fa-times-circle"></i>
								</sup>
							</span>

						</span>
					</div>

					<table id="table" class="table table-striped table-hover table-bordered" style="word-wrap: break-word">
						<tbody>

						</tbody>
					</table>

					<div id="allFilterContent">

					</div>

				</div>

			</div>

			<div class="tab-pane " id="interInDel">

				<div class="table-responsive" style="margin-top: 20px">

					<label>Select the columns to display:</label>
					<div id="checkbox" class="checkbox"></div>

					<div style="display: none;
						margin-bottom: 10px">Filtering and sort：
						<span id="filterCondition">

							<span class="eachFilterCondition" style="display: none">
								<span >Gene ID</span>
								<span style="color: red">LIKE</span>
								AT
								<sup style="" class="mySup" onclick="SampleManage.removeCondition">
									<i class="fa fa-times-circle"></i>
								</sup>
							</span>

						</span>
					</div>

					<div style="display: none;
						margin-bottom: 10px">Sorting conditions：
						<span id="sortCondition">

							<span class="eachFilterCondition" style="display: block">
								<span >Gene ID ,</span>
								<span style="color: red">Ascending sort</span>
								<sup style="" class="mySup" onclick="SampleManage.removeCondition">
									<i class="fa fa-times-circle"></i>
								</sup>
							</span>

						</span>
					</div>

					<table id="table" class="table table-striped table-hover table-bordered" style="word-wrap: break-word">
						<tbody>

						</tbody>
					</table>

					<div id="allFilterContent">

					</div>

				</div>

			</div>

		</div>

	</div>


	<script>



			$(function () {

				InDel.init

			})
	</script>


}
